<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        // map : 字典 
        // 1.创建一个map
        // let map = new Map();
        // map.set("myname","张三");
        // map.set({age:20},"hello");
        // console.log(map);

        // 2.直接创建map结构
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        // console.log(map);

        // map里的方法 ；
        // 1.长度 size 
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        // console.log(map.size);

        // let obj = {
        //     name:"张三",
        //     age:20
        // }
        // let count = 0;
        // for(let key in obj){
        //     count++
        // }
        // console.log(count);

        // console.log(obj.length);

        // 2.set 方法 
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        // map.set("hello","world");
        // console.log(map);

        // 3.删除 delete 、clear
        // map.delete(键名);
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        // map.delete("name");
        // console.log(map);
        // map.clear();
        // console.log(map);

        // 4.是否存在某个元素 has 
    //     let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
    //   var res =   map.has("name");
    //   console.log(res);

    // 5.通过 键名获取 键值 get : set 数据结构里没有这个方法
//     let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
//    let res =  map.get("age");
//    console.log(res);

// 6.keys 和values；
// let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
// let keys =  map.keys();
// console.log(keys);
// let values = map.values();
// console.log(values);


// 把元素作为键名 
let lis = document.querySelectorAll("li");
let  map = new Map();
map.set(lis[0],"skyblue");
map.set(lis[1],"yellow");
map.set(lis[2],"red");
map.forEach((item,key)=>{
    key.style.color = item;
})








    </script>
</body>
</html>